<!-- 
  main页面 按需加载页面组件
 -->
<template>
  <!-- el-row 中为按钮循环 -->
  <el-row style="float: right; padding: 10px 20px 15px 0">
    <el-button
      v-for="btn in obj.buttons"
      :key="btn.id"
      :icon="btn.icon"
      :type="btn.type"
      @click="clickButton(btn)"
    >
      {{ btn.name }}
    </el-button>
  </el-row>

  <!-- compent 为动态加载子组件，通过:is属性 ，btnObj为子组件传递btn参数，通过不同的值以执行不同的方法 -->
  <component :is="otherParam.currentTabComponent" :btnObj="obj.btn"></component>
</template>

<script>
import { reactive } from "vue";

export default {
  setup() {
    const obj = reactive({
      buttons: [], //按钮数组
      btn: {}, //传递给子组件的参数
    });

    let otherParam = reactive({
      currentTabComponent: "", //定义变量，并设置默认组件
    });

    //改变main加载的子组件， left -> Home -> 此方法
    const setPageTarget = (targetMenu) => {
      otherParam.currentTabComponent = targetMenu.target;
      obj.buttons = targetMenu.buttons;
    };

    //点击按钮事件 radom是为了改变btn的值，否则子页面不会监听按钮第二次点击
    const clickButton = (btn) => {
      btn.radom = Math.ceil(Math.random() * 100);
      obj.btn = btn;
    };

    return {
      obj,
      otherParam,
      setPageTarget,
      clickButton,
      btnObj: obj.btn,
    };

  },
};
</script>

<style >
</style>